<template>
	<view>
		
		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="新增地址" back-icon-color="#000" :is-back="true" title-color="#000" :background="{ background:'#ffffff'}" :border-bottom="true">
			
		</u-navbar>
		<!-- #endif -->

		<view style="width: 100%;">
			<map id='map' ref='map' :enable-scroll="false" :scale="scaleSize" v-bind:style="{height: mapH + 'px'}" style="width: 100%;" :latitude="latitude" :longitude="longitude" :controls='controls' :enable-poi="true">
				
				<!-- #ifdef APP-PLUS -->
				<cover-view style='width:100%;height:100%;'></cover-view>
				<!-- #endif -->
				
				<!-- #ifdef H5 -->
				<cover-view style='width:100%;height:100%;'></cover-view>
				<!-- #endif -->
				
				<!-- #ifdef MP-WEIXIN -->
				<view style='width:100%;height:100%;'></view>
				<!-- #endif -->
			
			</map>
			
			<!-- #ifdef H5 || MP-WEIXIN -->
			<cover-image v-bind:style="{left: controlsLeft + 'px', top: controlsTop + 'px'}" class="controls-location" :src="positionIcon"></cover-image>
			<!-- #endif -->
			
		</view>
		
		<!-- #ifdef H5 -->
		<!-- <view class="jianbianse"></view> -->
		<!-- #endif -->
		

		<view class="add_res_wrap">
			<view class="yixuandizhi" v-if="Object.keys(addressData).length != 0">
				<view class="yx_name">
					<view>{{addressData.address.poistitle}}</view>
					<view>{{addressData.address.address}}</view>
				</view>
				<view class="yx_xg" @click="Toxuanze()">修改地址</view>
			</view>
			<view class="add_res_box">
				<view class="xz_dz" @click="Toxuanze()" v-if="Object.keys(addressData).length === 0">
					<view>选择收货地址<u-icon name="arrow-right" size="22" color="#FF4910"></u-icon></view>
				</view>
				<view class="inout_box">
					<view class="input_title">门牌号</view>
					<view class="input_k">
						<u-input :focus="false" v-model="menpai" type="text" :border="false"
							placeholder="详细地址，例1层101室" />
					</view>
				</view>
				<view class="inout_box">
					<view class="input_title">联系人</view>
					<view class="input_k">
						<u-input v-model="name" type="text" :border="false" placeholder="请填写收货人的姓名" />
					</view>
					<view class="xingbie">
						<u-radio-group v-model="value" @change="radioGroupChange" active-color="#FF8F3D" size="32">
							<u-radio label-size="28" v-for="(item, index) in list" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
				<view class="inout_box">
					<view class="input_title">手机号</view>
					<view class="input_k">
						<u-input v-model="phone" maxlength="11" type="number" :border="false" placeholder="请填写收货人手机号码" />
					</view>
				</view>
				
				<view class="inout_box" style="padding: 24rpx 0;">
					<view class="input_title">是否默认</view>
					<view class="input_k">
						<view style=""></view>
					</view>
					<view class="xingbie">
						<u-radio-group v-model="value2" @change="radioGroupChange22" active-color="#FF8F3D" size="32">
							<u-radio label-size="28" v-for="(item, index) in list2" :key="index" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>

				<view class="lijipay">
					<u-button type="info" hover-class="none" shape="circle" :ripple="false" @click="baocun()">保存地址</u-button>
				</view>

			</view>
		</view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				scaleSize: 18, //缩放级别
				mapH: 0, // 地图高度，可在initMapH()中设置高度
				mapW: 0, // 屏幕宽度
				longitude: 0, // 初始经度
				latitude: 0, // 初始纬度
				controlsLeft: 1000,
				controlsTop: 1000,
				controls: [], // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍
				positionIcon: '/static/position.png',





				menpai: '',
				name: '',
				phone: '',
				sex: '先生',

				list: [{
						name: '先生',
						disabled: false
					},
					{
						name: '女士',
						disabled: false
					}
				],
				value: '先生',
				
				list2: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				],
				value2: '是',
				moooo:'',

				addressData: {},
				
				is_moren: 1
			}
		},
		onLoad() {
			// #ifdef H5 || MP-WEIXIN
			this.H5getLocation()
			// #endif

			// #ifdef APP-PLUS
			this.AppgetLocation()
			// #endif

			this.initMapH()
			this.initPositionIcon()

			uni.$on('GetAddressData', (data) => {
				this.xindingwei(data)
			})
		},
		methods: {

			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
				this.sex = e
			},
			radioGroupChange22(e) {
				
				if(e == '是'){
					this.is_moren = 1
				} else {
					this.is_moren = 0
				}
				console.log(this.is_moren);
			},
			baocun() {
				console.log('执行了吗')
				let that = this
				if (Object.keys(that.addressData).length === 0) {
					uni.showToast({
						title: '请选择收货地址',
						icon: 'none',
						duration: 2000
					})
				} else if (that.name == '') {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 2000
					})
				} else if (that.phone == '') {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none',
						duration: 2000
					})
				} else {

					that.$api.AddnewAddress({
						latitude: that.latitude, //	是	float	坐标纬度
						longitude: that.longitude, //	是	float	坐标经度
						name: that.name, //	是	string	收货人姓名
						tel: that.phone, //	是	string	电话
						sex: that.sex, //	是	int	性别
						address: that.addressData.address.poistitle, //	是	string	收货地址
						house_number: that.menpai, //	是	string	门牌号
						is_default: that.is_moren, //	否	int	是否设置为默认地址1 0
						city: that.addressData.address.city,
						province: that.addressData.address.province
					}).then(res => {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
						setTimeout(() => {
							uni.navigateBack()
						}, 2000)
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					})

				}
			},
			Toxuanze() {
				uni.navigateTo({
					url: '/subpackageB/pages/Selectlocation/Selectlocation',
					animationType: 'pop-in'
				})
			},

			//刷新地图
			xindingwei(data) {
				console.log('从地图选择的位置', data)
				
				// #ifdef MP-WEIXIN 
				this.addressData = data.data
				// #endif 
				
				// #ifdef H5 
				this.addressData = data.data
				// #endif 
				
				// #ifdef APP-PLUS 
				this.addressData = {
					address: {
						poistitle: data.data.address.poistitle,
						address: data.data.address.address
					}
				}
				// #endif 
				
				this.longitude = data.data.longitude
				this.latitude = data.data.latitude
				uni.createMapContext("map", this).moveToLocation({ //moveToLocation将地图中心移动到当前定位点，需要配合map组件的show-location使用
					latitude: data.data.latitude,
					longitude: data.data.longitude
				});
			},




































			//APP查询现在的位置
			AppgetLocation() {
				let this_ = this
				let weidu = uni.getStorageSync('lat')
				let jingdu = uni.getStorageSync('lng')
				
				if(!weidu || !jingdu){
					uni.getLocation({
						type: 'gcj02',
						//安卓打包开启 IOS打包注释掉  因为IOS上获取很慢位置问题
						//highAccuracyExpireTime: "3000",
						//isHighAccuracy: true,
						success: function(res) {
							//this_.latitude = '24.890854'
							//this_.longitude  = '102.829610'
							this_.longitude = res.longitude;
							this_.latitude = res.latitude;
						},
						fail: function(e) {
							uni.showToast({
								icon: 'none',
								title: '获取地址失败, 请检查是否开启定位权限~~'
							})
						}
					})
				}else {
					//console.log('本地有经纬度')
					let ress = {
						latitude: weidu,
						longitude: jingdu
					}
					this_.longitude = ress.longitude;
					this_.latitude = ress.latitude;
				}
				
			},
			// H5查询现在的位置
			H5getLocation() {
				let this_ = this
				
				let weidu = uni.getStorageSync('lat')
				let jingdu = uni.getStorageSync('lng')
				
				if(!weidu || !jingdu){
					//console.log('本地没有经纬度')
					uni.getLocation({
						type: 'gcj02',
						highAccuracyExpireTime: 3000, // 高精度定位超时时间(ms)
						isHighAccuracy: true, // 开启高精度定位
						success: function(res) {
							//this_.latitude = '24.890854'
							//this_.longitude  = '102.829610'
							this_.longitude = res.longitude;
							this_.latitude = res.latitude;
						},
						fail: function(e) {
							uni.showToast({
								icon: 'none',
								title: '获取地址失败, 请检查是否开启定位权限~~'
							})
						}
					})
				}else {
					//console.log('本地有经纬度')
					let ress = {
						latitude: weidu,
						longitude: jingdu
					}
					this_.longitude = ress.longitude;
					this_.latitude = ress.latitude;
				}
				
			},
			// 初始化地图中心位置的定位图片
			initPositionIcon() {
				setTimeout(() => {
					
					// #ifdef APP-PLUS
					var controls = {
						id: '1',
						iconPath: this.positionIcon,
						position: {
							left: this.mapW / 2 - 10,
							top: this.mapH / 2 - 50,
							width: 30,
							height: 30,
						},
						clickable: false
					}
					this.controls.push(controls)
					// #endif
					
					// #ifdef H5
					this.controlsLeft = this.mapW / 2 - 20
					this.controlsTop = this.mapH / 3
					// #endif
					
					// #ifdef MP-WEIXIN
					this.controlsLeft = this.mapW / 2 - 20
					this.controlsTop = this.mapH / 1.6
					// #endif

					
				}, 100)
			},
			// 计算地图的高度
			initMapH() {
				// #ifdef APP-PLUS
				this.mapW = uni.getSystemInfoSync().windowWidth
				this.mapH = uni.getSystemInfoSync().windowHeight - 690;
				// #endif

				// #ifndef APP-PLUS
				this.mapW = uni.getSystemInfoSync().windowWidth
				this.mapH = uni.getSystemInfoSync().windowHeight - 520;
				// #endif

				// #ifdef MP-WEIXIN
				this.mapW = uni.getSystemInfoSync().windowWidth
				this.mapH = uni.getSystemInfoSync().windowHeight - 600;
				// #endif
			},
		}
	}
</script>

<style lang="scss">
	.jianbianse {
		width: 100%;
		
		background-image: linear-gradient(to top, #ffffff, transparent);
		position: absolute;
		
		/* #ifdef MP-WEIXIN */
		top: 100px;
		height: 432px;
		/* #endif */
		
		/* #ifdef H5 */
		top: 144px;
		height: 150px;
		/* #endif */
		
		/* #ifdef APP-PLUS */
		top: 100px;
		height: 150px;
		/* #endif */
	}

	.add_res_wrap {
		
		/* #ifdef MP-WEIXIN */
		margin: 0 auto 0;
		position: absolute;
		top: 280px;
		/* #endif */
		
		/* #ifdef H5 */
		position: absolute;
		margin: 0 auto;
		top: 180px;
		/* #endif */
		
		/* #ifdef APP-PLUS */
		margin: 20rpx auto 0;
		top: 180px;
		/* #endif */
		
		
		width: 94%;
		left: 0;
		right: 0;
		
		border-radius: 20rpx;

		.yixuandizhi {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			.yx_name {
				flex: 1;

				view:nth-child(1) {
					font-size: 28rpx;
				}

				view:nth-child(2) {
					color: #999;
					font-size: 24rpx;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			.yx_xg {
				color: #FF4910;
				border-radius: 200rpx;
				border: 1px solid #FF4910;
				font-size: 24rpx;
				height: 56rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 20rpx;
			}
		}

		.add_res_box {
			background-color: #fff;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
			border-radius: 30rpx;
			padding: 20rpx;

			.xz_dz {
				color: #FF4910;
				border-radius: 16rpx;
				border: 1px solid #FF4910;
				text-align: center;
				height: 74rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
			}

			.inout_box {
				display: flex;
				align-items: center;
				padding: 14rpx 0;
				border-bottom: 1px solid #f3f3f3;

				.input_title {
					margin-right: 10rpx;
				}

				.input_k {
					flex: 1;
				}

				.xingbie {
					margin-left: auto;
				}
			}
		}
	}



	.lijipay {
		width: 100%;
		margin: 48rpx auto 0;

		.u-size-default {
			height: 80rpx !important;
			line-height: 80rpx !important;
			background-image: linear-gradient(to right, #FE9400, #FF3D22) !important;
			color: #fff;
		}
	}

	.controls-location {
		height: 46px;
		width: 46px;
		position: absolute;
	}
</style>